<template>
  <div class="uesr-container">
      <headersub :name='name1' :action='"personHead"' @fucallback='fucallbackAction'></headersub>
      <div class="user-content">
          <span>好友名字</span>
          <span>{{jid}}</span>
          <p>设置备注和标签</p>
          <button type="button" class="mui-btn mui-btn-success" @click='sendText'>发消息</button>
          <button type="button" class="mui-btn mui-btn-success" @click='sendAudio'>语音通话</button>
      </div>
      <!-- 右上角点击展示可以操作的动作 -->
      <div class='person-action-container' :class="{active: showActionFlag}">
        <div class="mui-content mui-scroll-wrapper">
            <ul class="mui-table-view mui-scroll" style="margin-top: 0;">
                <li class="mui-table-view-cell person-action-item" data-action='setNickname'>
                    <span class="mui-icon mui-icon-compose"></span>
                    设置备注及标签
                </li>
                <li class="mui-table-view-cell person-action-item" data-action='shareFriend'>
                    <span class="mui-icon-self icon-undo2"></span>
                    把他推送给朋友
                </li>
                <li class="mui-table-view-cell person-action-item" data-action='setLoveFriend'>
                    <span class="mui-icon-self icon-favorite"></span>
                    设置为星标朋友
                </li>
                <li class="mui-table-view-cell person-action-item" data-action='setRight'>
                    <span class="mui-icon-self icon-lifebuoy"></span>
                    设置权限
                </li>
                <li class="mui-table-view-cell person-action-item" data-action='setBlackFriend'>
                    <span class="mui-icon-self icon-blocked"></span>
                    加入黑名单
                </li>
                <li class="mui-table-view-cell person-action-item" data-action='deleteFriend'>
                    <span class="mui-icon-self icon-bin"></span>
                    删除
                </li>
                <li class="mui-table-view-cell person-action-item" data-action='complaint'>
                    <span class="mui-icon-self icon-warning"></span>
                    投诉
                </li>
            </ul>
        </div>
      </div>
      <connectaudio @zicallback='fucallbackAudio'></connectaudio>
  </div>
</template>

<script>
// import headersub from './HeaderSub'
import headersub from '../public/header/HeaderSubAction'
import connectaudio from './ConnectAudio'
import {SET_CURRENT_CHAT_USER, RESET_MESSAGE_LIST_UNREADNUM, RESET_SHOW_AUDIO, RESET_SHOW_WAITING} from '../../store/mutation-types'
import {mapState, mapMutations, mapActions} from 'vuex'
 export default {
     data() {
         return {
             name1: '',
             // 点击展现下方一个div，div里面有选项，删除好友等内容 false：不展示 true展示，头部点击就为true
             showActionFlag: false,
            //  传参过来的内容 cwf13
             jid: this.$route.params.jid
            // 发送语音消息的时候展现出来的界面
            //  showAudio: false
         }
     },
     components: {
        headersub,
        connectaudio
     },
     mounted() {
         console.log(this.$route.params.jid)
         console.log(this.$route.params)
         this.init()
        //  console.log()
     },
     computed: {
         ...mapState(['currentLoginUser'])
        //  ...mapGetters(['getCurrentChatUsername'])
     },
     methods: {
         ...mapMutations({
             setCurrentChatUserId: SET_CURRENT_CHAT_USER,
              resetMessageListUnreadnum: RESET_MESSAGE_LIST_UNREADNUM,
              resetShowAudio: RESET_SHOW_AUDIO,
              resetShowWaiting: RESET_SHOW_WAITING
         }),
         ...mapActions(['deleteFriendList', 'deleteDbMessageList']),
         init() {
             var self = this
             self.$immui.init()
             self.$immui('.mui-scroll-wrapper').scroll()
             self.$immui('.uesr-container').on('tap', '.person-action-container', function (e) {
                // console.log(11111111)
                self.showActionFlag = false
             })
             self.$immui('.person-action-container').on('tap', '.person-action-item', function (e) {
                // console.log('删除好友’')
                console.log(this.getAttribute('data-action'))
                let actionFlag = this.getAttribute('data-action')
                switch (actionFlag) {
                    case 'setNickname': break
                    case 'shareFriend': break
                    case 'setLoveFriend': break
                    case 'setRight': break
                    case 'setBlackFriend': break
                    case 'deleteFriend':
                        let btnArray = ['确认', '取消']
                        self.$immui.confirm(`将联系人${self.jid}删除，将同时删除与该联系人的聊天记录`, '删除联系人', btnArray, function(e) {
                        if (e.index === 0) {
                            let jjid = `1105181206098244#mini-chat_${self.jid}@easemob.com`
                            // console.log(self.jid)
                            // 删除数据库好友列表
                            // 删除vuex好友列表
                            // 删除vuex与该好友的聊天列表
                            // 删除数据库与该好友的聊天列表
                            self.deleteFriendList(jjid)
                            // 回退当前的路由
                            self.$router.go(-1)
                            // 环信好友关系的解除
                            self.$imconn.removeRoster({
                                to: self.jid,
                                success: function () {
                                    // 环信删除好友成功
                                    self.$imconn.unsubscribed({
                                        to: self.jid
                                    })
                                },
                                error: function () {
                                    console.log('环信删除好友失败')
                                }
                            })
                        } else {
                            console.log('取消删除好友')
                        }
                    })
                        break
                    case 'complaint': break
                    default : break
                }
                // self.showActionFlag = false
             })
         },
         sendText() {
          // 使用vuex共享数据在这里调用函数全局设置当前用户聊天的id，方便聊天页面的查找该用户
          let jjid = `1105181206098244#mini-chat_${this.jid}@easemob.com`
          this.setCurrentChatUserId(jjid)
          // 单击打开新的页面
          this.$immui.openWindow({
            // 哈希路径
            url: '#/chatview'
          })
        //   // 修改消息列表未读消息数
          this.resetMessageListUnreadnum(jjid)
         },
         sendAudio() {
            // this.showAudio = true
            //  console.log('语音电话', this.showAudio)
            this.resetShowAudio(true)
            this.resetShowWaiting(false)
            // this.resetShowRes(true)
            //  let jjid = `1105181206098244#mini-chat_${this.jid}@easemob.com`
             // 自己的ID
             let caller = this.currentLoginUser.username
             // 好友的ID
             let becalled = this.jid
            console.log(this.currentLoginUser.username, this.jid, '发送语音的聊天对象')
            this.$imrtccall.caller = caller
            this.$imrtccall.makeVoiceCall(becalled)
         },
         fucallbackAction(showBottomFlag) {
            console.log(showBottomFlag, '是否展示多功能的标志')
            this.showActionFlag = showBottomFlag
         },
         fucallbackAudio(showAudioRes) {
            //  console.log(showAudioRes)
            //  this.showAudio = showAudioRes
             this.resetShowAudio(showAudioRes)
         }
     }
  }
</script>

<style lang='scss'>
@import '../../public/scss/style.css';
.mui-popup-button{
    color: red;
}
.mui-popup-button.mui-popup-button-bold{
    color: #007aff;
}
.mui-popup-title{
    height: 10vh;
    line-height: 10vh;
}
.mui-popup-text{
    height: 6vh;
    // line-height: 6vh;
}
.uesr-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f4f4f4;
    z-index: 12;
    .user-content{
        position: absolute;
        top: 50px;
        left: 0;
    }
}
.person-action-container{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 400px;
    width: 100vw;
    background: wheat;
    transition: all 0.5s ease;
    transform: translateY(100%);
    &.active{
        transform: translateY(0);
    }
    .person-action-item{
        color: #868686;
        height: 68px;
        line-height: 42px;
        .mui-icon-compose{
             font-size: 20px;
            padding: 0 5vw;
        }
        .mui-icon-self{
            font-size: 18px;
            padding: 0 5vw;
            // font-weight: 900;
        }
    }
}
.mui-btn{
    width: 100vw;
    margin-top: 10px;
}
</style>
